<template>
    <div class="container">
      <div class="handle-box">
        <span style="padding:8px;">标题：</span>
        <el-input v-model="query.title"         placeholder=""  class="handle-input mr10"></el-input>
        <!-- <span style="padding:8px;">所属分类：</span> -->
        <!-- <el-select v-model="query.cate" placeholder="请选择">
            <el-option
              v-for="item in zzTypeist"
              :key="item.id"
              :label="item.title"
              :value="item.id">
            </el-option>
        </el-select> -->
        <span style="padding:8px;"></span>
        <el-button type="success"
                   icon="el-icon-search"
                   size="medium"
                   @click="handleSearch">搜索</el-button>
        <!-- <el-button type="warning"
                   size="medium"
                   icon="el-icon-refresh-left"
                   @click="resultClick()">重置</el-button> -->
         <!-- 导出 -->
                      <!-- <downExcel
                          :fetch-data="excelExport"
                          :json-fields="jsonFields"
                          :fill-name="fillName"
                      ></downExcel> -->
  
      </div>
      <div style="padding:10px;">
            <el-button
                type="primary"
                icon="el-icon-document-add"
                size="medium"
                @click="createMethod"
            >新建</el-button>
            <span style="padding:8px;"></span>
            <!-- <el-button
                type="danger"
                icon="el-icon-delete"
                size="medium"
                @click="delAllSelection"
            >批量删除</el-button> -->
        </div>
      <el-table :data="tableData"
                border
                ref="multipleTable"
                header-cell-class-name="table-header"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection"
                         width="55"
                         align="center"></el-table-column>
        <!-- <el-table-column label="序号"
                         align="center"
                         width="100"
                         fixed>
          <template slot-scope="scope">{{scope.$index+(query.pageIndex - 1) * query.pageSize + 1}}</template>
        </el-table-column> -->
         <el-table-column label="课程ID"  align="center">
          <template slot-scope="scope">{{scope.row.id}}</template>
        </el-table-column>
  
        <el-table-column label="资讯教师"  align="center" width="120px">
          <template slot-scope="scope">{{scope.row.tname}}</template>
        </el-table-column>
        <el-table-column label="课程"   align="center" width="220px">
          <template slot-scope="scope">{{scope.row.name}}</template>
        </el-table-column>

        <el-table-column label="课程费用"   align="center" width="120px">
          <template slot-scope="scope">{{scope.row.cose}}</template>
        </el-table-column>
        <el-table-column label="报名情况" align="center">
          
            <el-button @click="createBus(scope.row)"
                       type="text"
                       size="small" >查看</el-button>
                      
            
        </el-table-column>
        
        <el-table-column label="授课班级/年级"                         align="center">
          <template slot-scope="scope">{{scope.row.sname}}</template>
        </el-table-column>
      
  
        <el-table-column label="总课时"                         align="center">
          <template slot-scope="scope">{{scope.row.ksnums}}</template>
        </el-table-column>
        <el-table-column label="状态"                         align="center">
          <template slot-scope="scope">{{scope.row.statustext}}</template>
        </el-table-column>
        <el-table-column label="添加课表"                         align="center">
          <template slot-scope="scope">
          <el-button @click="tokcbiao(scope.row)"
                       type="text"
                       size="small" >添加课表</el-button>
                      </template>         
        </el-table-column>
        <!-- <el-table-column label="活动状态" align="center">
            <template slot-scope="scope">
                <span v-if="scope.row.status==0">启用</span>
                <span v-if="scope.row.status==1">禁用</span>
            </template>
        </el-table-column> -->
        <!-- <el-table-column label="创建时间" align="center">
            <template slot-scope="scope">{{scope.row.create_time | formDate}}</template>
        </el-table-column> -->
        <el-table-column label="操作"
                         width="200"
                         align="center">
          <template slot-scope="scope">
            <el-button @click="createBus(scope.row)"
                       type="text"
                       size="small">编辑</el-button>
   
          <!-- <el-button @click="backTomycustomer(scope.row)" type="text" size="small" >录入进度</el-button>
           <el-button @click="showprocess(scope.row)" type="text" size="small" >查看进度</el-button>
          <el-button @click="showperson(scope.row)" type="text" size="small" >查看诉讼</el-button> -->
          
  
            <el-button @click="handleDelete(scope.row)"
                       type="text"
                       size="small"
                       icon="el-icon-delete"
                       class="red">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background
                       layout="total, prev, pager, next, jumper"
                       :current-page="query.pageIndex"
                       :page-size="query.pageSize"
                       :total="pageTotal"
                       @current-change="handlePageChange"></el-pagination>
      </div>
  
         <!-- 录入进度 -->
          <el-dialog
              :title="ruleFormzhcustomer.id ? '编辑' : '新增'"
              :visible.sync="dialogVisiblezhCustom"
              width="50%"
              :close-on-click-modal="false"
              top="2%"
              :before-close="(e) => handleClose(e, 'ruleFormzhcustomer')"
          >
              <el-form :model="ruleFormzhcustomer" ref="ruleFormzhcustomer" :rules="ruleForms" v-loading="loading" status-icon label-width="130px">
                  <el-form-item label="名称" prop="name">
                      <el-input v-model.trim="ruleFormzhcustomer.name" placeholder="请输入内容" style="width: 80%"  autofocus></el-input>
                  </el-form-item>
                   <el-form-item label="长标题" prop="longname">
                      <el-input v-model.trim="ruleFormzhcustomer.longname" placeholder="请输入内容" style="width: 80%"  ></el-input>
                  </el-form-item>
                   <el-form-item label="价格" prop="title">
                      <el-input v-model.trim="ruleFormzhcustomer.price" placeholder="请输入内容" style="width: 80%"  ></el-input>
                  </el-form-item>
                  <el-form-item label="材料1" prop="cover">
                     
                        <file-upload :file-url.sync="ruleFormzhcustomer.cover" :uplaod-path="wordUpLoad"></file-upload>
                      <!-- <p style="padding: 6px; font-size: 12px; color: red">(图片高宽比16:9,格式为png透明图)</p> -->
                  </el-form-item>
                  <el-form-item label="状态">
                      <el-radio-group v-model="ruleFormzhcustomer.status">
                          <el-radio :label="0">启用</el-radio>
                          <el-radio :label="1">禁用</el-radio>
                      </el-radio-group>
                  </el-form-item>
                   
                   
                  <!-- <el-form-item label="用户" prop="name">
                      <el-input v-model.trim="ruleFormzhcustomer.name" placeholder="请输入内容" style="width: 80%"></el-input>
                  </el-form-item>
                     <el-form-item label="手机" prop="mobile">
                      <el-input v-model.trim="ruleFormzhcustomer.mobile" placeholder="请输入内容" style="width: 80%"  ></el-input>
                  </el-form-item> -->
  
                    <!-- <el-form-item label="备注" prop="mark">
                      <el-input v-model.trim="ruleFormzhcustomer.mark" placeholder="请输入内容" style="width: 80%"  ></el-input>
                  </el-form-item> -->
                   <!-- <el-form-item label="描述" prop="content">
                     <el-input v-model="ruleForm.content" :rows="6" type="textarea" placeholder="请输入"></el-input>
                  </el-form-item>
                 -->
  
                  <!-- <div class="list-group">
                <el-row :gutter="20">
                  <el-col :span="3">
                    <div>选择用户:</div>
                  </el-col>
                  <el-col :span="21">
                    <el-checkbox-group v-model="roleListVal">
                      <el-checkbox :label="val.id"
                                   @change="jsMethod()"
                                   :checked="val.active"
                                   v-for="(val,key) in roleList"
                                   :key="key">{{val.name}}</el-checkbox>
                    </el-checkbox-group>
                  </el-col>
                </el-row>
              </div> -->
  
  
              </el-form>
              <span slot="footer" class="dialog-footer">
                  <el-button @click="dialogVisiblezhCustom = false">取 消</el-button>
                  <el-button type="primary" @click="onSubmitbackTomycustomer()">确 定</el-button>
              </span>
          </el-dialog>
      
   
    </div>
  </template>
  
  <script>
  import api from '@/api/index';
  import {getdate} from '@/utils/utils'
  import imgUpload from '@/components/views/commons/ImgUpload';
  import fileUpload from '@/components/views/commons/fileUpload';
  import downExcel from '@/components/views/commons/ExcelModel';
  export default {
    name: "financeList",
     components:{imgUpload,fileUpload,downExcel},
    data () {
      return {
        // docLoadPath: api.IMG_PATH,
        docLoadPath: api.API_PATH+"/",
        wordUpLoad: api.uploadFileall,
        exhibition_id: '',
        loading: false,
        dialogVisible: false,
        prolistarr:[],
        dialogVisiblezhCustom: false,
        query: {
          pageIndex: 1,
          pageSize: 10,
          title: '',
          cate: [],
        },
        zzTypeist: [],
        pageTotal: 0,
        tableData: [],
        fId:'',
        f_text:'',
        fTextModel:false,
          ruleForms: {
                  // title: [{ required: true, message: '请填写公告名称', trigger: 'blur' }],
                  // url: [{ required: true, message: '图片地址', trigger: 'blur' }],
                  // content: [{ required: false, message: '请填写内容', trigger: 'blur' }]
              },
           ruleFormzhcustomer: {
                  title: '',
                  caseno: '',
                  status:0,
                  name: '',
                  mobile: '',
                  sort:0,
                  fileurl:'',
                    mark: '',
                 role_ids: '',
              },
  
        idList: [], //选择的id数组
        multipleSelection: [],
        jsonFields: {},
       fillName: '',
        roleList: [],
       roleListVal: [],
       userclatListVal: [],
       serverid:'',
        hosname:'',
        hosid:'',
      }
    }, 
    filters:{
      toFixedFile:function(val){
        if(!val)return '0.00';
        return Number(val).toFixed(2)
      },
      formDate: (val) => {
          if (!val) return '';
          return getdate(val);
      }
    },
    mounted () {
      this.serverid = this.$route.query.serverid;
      this.hosname = this.$route.query.hosname; 
      this.hosid = this.$route.query.hosid; 
  
      this.initAjaxMethod()
      // this.ohterAjaxMethd()
      // this.roleAjaxMethod();
    },
  
    methods: {
      //打回
      refuseMethod(data){
        this.f_text='';
        this.fTextModel=true;
        this.fId=data.id;
      },
      saveEdit(){
        if(!this.f_text && this.f_text == ''){
          this.$message.error('请填写合同打回原因');
          return false;
        }else{
          this.refuseAjax()
        }
      },
      //合同打回ajax
      ohterAjaxMethd(){
        this.$http.post(api.SERVER_CATE_LIST)
            .then((res) => {
              console.log('项目列表', res)
              if (res.code == 1) {
                this.zzTypeist=Array.isArray(res.data)?res.data:[]
              } else {
                this.$message.error(res.msg);
              }
            })
            .catch((err) => {
              this.$message.error(err.msg);
            })
      },
      //删除
      handleDelete(data){
        this.delAjaxMethod(data.id);
      },
      //编辑
      createBus(row){
        this.$router.push({ path: '/kechengAdd', query: {id:row.id, type: 2}})
      },

      tokcbiao(row){
        this.$router.push({ path: '/kcbiaoAdd', query: {tid:row.tid,tname:row.tname,kcid:row.id,kcname:row.name, type: 1}})
      },


      
      resultClick () {
        this.query.title = '';
        this.query.store = '';
        this.query.pageIndex=1;
        this.initAjaxMethod()
      },
      createMethod () {
        this.$router.push({ path: '/kechengAdd', query: { type: 1 } })
      },
      // 多选操作
      handleSelectionChange (val) {
        this.multipleSelection = val;
  
        var emptyIdList = [];
        for (var i = 0; i < val.length; i++) {
          emptyIdList.push(val[i].id);
        }
        this.idList = emptyIdList;
        console.log(this.idList);
  
  
      },
      delAllSelection () {
        let arr = [];
        if (this.multipleSelection.length <= 0) {
            this.$message({
                type: 'error',
                message: '请选择一个'
            });
            return false;
        } else {
            this.multipleSelection.forEach(item => {
                arr.push(item.id);
            });
            this.delAjaxMethod(arr.join(','));
        }
      },
      delAjaxMethod(ids){
        this.$confirm('此操作将删除此条信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const loading = this.$loading({ text: '加载中...' });
          this.$http.post(api.kecheng_DEL, {ids:ids})
                .then((res) => {
                  loading.close();
                  console.log('项目列表', res)
                  if (res.code == 1) {
                    this.$message.success('删除成功');
                    this.query.pageIndex=1;
                    this.initAjaxMethod()
                  } else {
                    this.$message.error(res.msg);
                  }
                })
                .catch((err) => {
                  this.$message.error(err.msg);
                })
        })
      },
  
    handleDeletepro(data2){
        let ids=data2.id;
        this.$confirm('此操作将删除此条信息, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          const loading = this.$loading({ text: '加载中...' });
          this.$http.post(api.SERVER_PRODEL, {ids:ids})
                .then((res) => {
                  loading.close();
                  console.log('项目列表', res)
                  if (res.code == 1) {
                    this.dialogVisible=false;
                    this.$message.success('删除成功');
                    this.query.pageIndex=1;
                    this.initAjaxMethod()
                  } else {
                    this.$message.error(res.msg);
                  }
                })
                .catch((err) => {
                  this.$message.error(err.msg);
                })
        })
      },
   
        // 转化客户
          backTomycustomer(row) {
            
              const ruleFormzhcustomer = {
                  title: row.name,
                  caseno: row.caseno,
                  name: '',
                  status: 0,
                  mobile: row.mobile,   
                   mark: row.mark,               
                  id:row.id,
                  role_ids:'',
              };
  
              //   row.roleList.forEach(item => {
              //   item.active = false;
              // });
              // let roleList = res.data.roleList.filter(item => item.status == 1);
              // this.roleList = roleList;
               row.personslist.forEach(item => {
                item.active = false;
              });
        
              let roleList = row.personslist.filter(item => item.status == 1);
                    console.log(roleList);
              this.roleList = roleList;
              
  
  
              this.ruleFormzhcustomer = ruleFormzhcustomer;
              this.dialogVisiblezhCustom = true;
          },
      // 分页导航
      handlePageChange (val) {
        this.$set(this.query, 'pageIndex', val);
        this.initAjaxMethod();
      },
      handleSearch () {
        this.$set(this.query, 'pageIndex', 1);
        this.initAjaxMethod()
      },
      initAjaxMethod () {
        let data = {
          page: this.query.pageIndex,//[string]	是	当前页
          pageSize: this.query.pageSize,//[string]	是	每页条数
          title: this.query.title,//[string]	是	付款名称
          hosid: this.hosid, 
        };
        this.$http.post(api.kecheng_INDEX, data)
          .then((res) => {
            console.log('财务', res)
            if (res.code == 1) {
              this.tableData = Array.isArray(res.data.list)?res.data.list:[];
              this.pageTotal = res.data.total;
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch((err) => {
            this.$message.error(err.msg);
          })
      },
        //弹框关闭按钮
       handleClose(done, name) {
          if (this.$refs['name']) {
                  this.$refs['name'].resetFields();
              }
              done();
        },
  
      //进度提交 
       onSubmitbackTomycustomer() {
   
             if(this.ruleFormzhcustomer.role_ids==""  ){
                this.$message.error('请选择用户');return false;
             } 
             if(this.ruleFormzhcustomer.sort==""){
                this.$message.error('请填写序号');return false;
             } 
  
             if(this.ruleFormzhcustomer.name==""){
                this.$message.error('请填写标题');return false;
             } 
  
  
             
              this.$refs.ruleFormzhcustomer.validate((valid) => {
                  if (valid) {
                      this.loading = true;
                      // const url = this.ruleFormzhcustomer.id ? api.DECORATIONcustom_EDIT : api.DECORATIONcustom_ADD;
                      const url = api.SERVER_PROADD; 
                      this.ruleFormzhcustomer.serverid=this.ruleFormzhcustomer.id;
                      this.$http.post(url, this.ruleFormzhcustomer)
                          .then((res) => {
                              if (res.code == 1) {
                                  this.$message.success('操作成功');
                                  this.initAjaxMethod();
                                  this.dialogVisiblezhCustom = false;
                              } else {
                                  this.$message.error(res.msg);
                              }
                              this.loading = false;
                          })
                          .catch(() => {
                              this.loading = false;
                          });
                  } else {
                      return this.$message.error('有必填项目未填写');
                  }
              });
          },
  
         //编辑
          prolist(row) {
              // this.$router.push({ path: '/articleAdd', query: {id:row.id, type: 2}})
              this.prolistarr=row.prolist;
              this.dialogVisible=true;
          },
          // 查看诉讼
           showperson(row) {
              this.$router.push({ path: '/decoration', query: {serverid:row.id, type: 2}})
             
          },
  
          // 查看进度
           showprocess(row) {
              this.$router.push({ path: '/serverprocess', query: {serverid:row.id, type: 2}})
             
          },
  
         jsMethod () {
            this.ruleFormzhcustomer.role_ids = this.roleListVal.join(',');
            // userclatListVal
          },
     roleAjaxMethod () {
        const loading = this.$loading({ text: '加载中...' });
        this.$http
          .post(api.ROLE_INDEX, {})
          .then(res => {
            loading.close();
            console.log('角色列表', res);
            if (res.code == 1) {
              res.data.roleList.forEach(item => {
                item.active = false;
              });
              let roleList = res.data.roleList.filter(item => item.status == 1);
              this.roleList = roleList;
            } else {
              this.$message.error(res.msg);
            }
          })
          .catch(err => {
            this.$message.error(err.msg);
          });
      },
  
           async excelExport() {
              const loading = this.$loading({ text: '加载中...' });
              let arr = [];
              //  this.idList
              this.idList.forEach(item => {
                  arr.push(item);
              });
  
   
  
              // console.log("sdfsfd",arr);return;
              // org_id: this.searchOrgId, keyword: this.searchName, page: this.currentPage,roleId:this.roleId
              const response = await this.$http.post(api.serveexport_LIST, {
                   page: this.query.pageIndex,//[string]	是	当前页
                  pageSize: this.query.pageSize,//[string]	是	每页条数
                  hoscode: this.query.hoscode,
                  keyword: this.searchName,
                  ids: arr.length > 0 ? arr.join(',') : '',
                  roleId:this.roleId
              });
              loading.close();
              console.log('response', response);
              if (response.code == 1) {
                  response.data.columns.forEach(item => {
                      this.jsonFields[item.title] = item.field;
                  });
                  this.fillName = response.data.filename ? response.data.filename : '胸卡明细表';
                  console.log('this.jsonFields', this.jsonFields);
                  console.log('response.data.list', response.data.list);
                  return response.data.list;
              }
          },
  
    }
  }
  </script>
  
  <style scoped>
  .handle-box {
      display: flex;
      flex-direction: row;
      align-items: center;
      margin-bottom: 20px;
  }
  .el-input--small {
      display: initial;
  }
  .handle-input {
      width: auto;
      display: inline-block;
  }
  .mr10 {
      margin-right: 10px;
  }
  .red {
    color: #f56c6c;
  }
    .green{
      color:#67C23A;
    }
  </style>